<template>
    <div class="evaluate">
        <NavBar title="服务评价" left-text="" left-arrow @click-left="onClickLeft"></NavBar>
        <span style="margin-left: 120px;font-size: 30px;">订单已完成</span><br>
        <span style="margin-left: 90px;">请对本次消费做出评价吧</span>
        <div class="hr">
            <hr>
        </div>
        <div class="rate">
            <Rate v-model="value" size="30" color="orange"></Rate> 
        </div>
        <div class="tag">
            <span @click="tag1" :class="[t1===tt1 ? 'color' : ''] ">干净整洁</span>
            <span @click="tag2" :class="[t2===tt2 ? 'color' : ''] ">菜品美味</span>
            <span @click="tag3" :class="[t3===tt3 ? 'color' : ''] ">有耐心</span>
            <span @click="tag4" :class="[t4===tt4 ? 'color' : ''] ">负责人</span>
            <span @click="tag5" :class="[t5===tt5 ? 'color' : ''] ">服务到位</span>
            <span @click="tag6" :class="[t6===tt6 ? 'color' : ''] ">价格合理</span>
        </div>
        <textarea name="" placeholder="写入其他建议和意见..." cols="30" rows="8"></textarea>
        <div class="a">
            <a style="color: #bbb;">满意的话请给五星好评哦，谢谢您的支持！</a>
        </div>
        <div class="bton">
            <button style="color: #fff;">确认提交</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { NavBar ,Rate  } from 'vant'
const onClickLeft = () => history.back();
const value = ref(3);
let t1 = ref(1)
let tt1 = ref(null)
let t2 = ref(2)
let tt2 = ref(null)
let t3 = ref(3)
let tt3 = ref(null)
let t4 = ref(4)
let tt4 = ref(null)
let t5 = ref(5)
let tt5 = ref(null)
let t6 = ref(6)
let tt6 = ref(null)
function tag1(){
    tt1.value = t1.value
}
function tag2(){
    tt2.value = t2.value
}
function tag3(){
    tt3.value = t3.value
}
function tag4(){
    tt4.value = t4.value
}
function tag5(){
    tt5.value = t5.value
}
function tag6(){
    tt6.value = t6.value
}
</script>
<style>
.hr hr{
    border-bottom: 3.5px dashed #bbb;
    width: 210px;
    margin-left: 87px;
}   
.rate{
    margin-top: 40px;
    margin-left: 110px
}
.tag {
    /* margin: 65px 75px; */
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 290px;
    height: 100px;
    margin-left: 35px;
}
.tag span{
    border: 1px solid #FCECD5;
    border-radius: 50px;
    padding: 8px 12px;
    font-size: 16px;
}
.color{
    background-color: orange;
    color: white;
}
textarea{
    width: 300px;
    height: 150px;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 2px;
    border: 1px solid #e3e0e0;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
textarea::-webkit-scrollbar {
    width: 8px;
}
.a{
    text-align: center;
    font-size: 14px;
}
.bton button{
    margin-top: 20px;
    margin-left: 60px;
    background-color: #09BB07;
    border: 1px solid #09BB07;
    border-radius: 5px;
    padding: 10px 80px;
    font-size: 16px;
    cursor: pointer;
    
}
</style>